<template>
	<view class="container">
		<!-- <statusBar></statusBar>
		<view class="go-back">
			<image src="../../static/go-back.svg" @click="goBack"/>
			<view>全部品牌</view>
			<image src="../../static/brands-search.svg"/>
		</view> -->
		<navigationBar :title="pageType==='1' ? '全部品牌' : '分类'">
			<template #right>
				<image class="search-img" src="../../static/brands-search.svg" @click="goSearch"/>
			</template>
		</navigationBar>

		<view class="con-bottom">
			<!-- 左边 -->
			<scroll-view 
				class="brands-left" 
				:scroll-y="true" 
				:show-scrollbar="false"
				:scroll-with-animation="false"
			>
				<!-- <view class="brands-left"> -->
					<view 
						:class="['type-item',ischangeType===index?'isCheck':'']" 
						v-for="(item,index) in dataInfo.typeList" 
						:key="item.id" 
						@click="changeType(index,item.name,item.id)">
							<text>{{item.name}}</text>
							<view v-if="index === ischangeType" class="line"></view>
					</view>
				<!-- </view> -->
			</scroll-view>

			<!-- 右边 全部品牌 -->
			<scroll-view 
				class="brands-right safe-padding" 
				:scroll-y="true" 
				:show-scrollbar="false"
				:scroll-into-view="keyValue"
				:scroll-top="scrollTop"
				:scroll-with-animation="false"
				v-if="pageType === '1'"
			>
				<!-- 标题 -->
				<view v-if="ischangeType === 0 || ischangeType === 1" class="hot-topic-title">
					<image src="../../static/hot-topic-brand.svg" mode="" />
				</view>
				<view v-else class="hot-topic-title">
					<image src="../../static/hot-brand.svg" mode="" />
				</view>

				<!-- 热门品牌 -->
				<view v-if="ischangeType === 0 || ischangeType === 1" class="brands-list">
					<view class="list-item" v-for="item in dataInfo.hotList" :key="item.id">
						<image :src="item.coverPic"/>
						<text>{{item.name}}</text>
					</view>
				</view>
				<!-- 热销品牌 -->
				<view v-else class="brands-list">
					<view class="list-item" v-for="item in getHotBrandsByType" :key="item.id">
						<image :src="item.coverPic"/>
						<text>{{item.name}}</text>
					</view>
				</view>
				<!-- 全部品牌 -->
				<view class="all-brands" v-if="ischangeType === 1">
					<view class="list-left">
						<view class="title">全部品牌</view>
						<view class="all-list">
							<view
								v-for="(item,index) of dataInfo.allBrandsListShow"
								:key="index"
								class="all-list-item"
							>
								<view class="all-list-type" :id="index">{{ index }}</view>
								<view
									v-for="(item2,index2) in item"
									class="all-list-col"
									:key="index2"
								>
									<view class="all-list-col-img">
										<image
											:src="item2.coverPic"
											mode="aspectFill"
										></image>
									</view>
									<view class="all-list-col-name">{{
										item2.name
									}}</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 字母表 -->
					<view class="list-right" @touchmove="letterMove">
						<view :class="['letter-item',keyValue===item?'check-item':'']" :id="'nav_item'+item" v-for="(item,index) in dataInfo.allBrandsAlphabet" :key="item" @click="changeKeyFunc(item)">{{item}}</view>
					</view>
				</view>
				<!-- 奢包品牌  腕表等 -->
				<view class="type-brands" v-if="ischangeType !== 0 && ischangeType !== 1">
					<view class="type-title">{{ischangeName}}品牌</view>
					<view class="brands-list">
						<view class="list-item" v-for="item in getBrandsByType" :key="item.id">
							<image :src="item.coverPic"/>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				<!-- 底部安全区域 -->
				<view class="safe-padding"></view>
			</scroll-view>

			<!-- 右边 分类 -->
			<scroll-view 
				class="brands-right safe-padding" 
				:scroll-y="true" 
				:show-scrollbar="false"
				:scroll-into-view="keyValue"
				:scroll-top="scrollTop"
				:scroll-with-animation="false"
				v-if="pageType === '2'"
			>
				<view class="hot-topic-title">
					<image src="../../static/hot-brand.svg" mode="" />
				</view>

				<!-- 热销品牌 -->
				<view class="brands-list">
					<view class="list-item" v-for="item in getHotBrandsByType" :key="item.id">
						<image :src="item.coverPic"/>
						<text>{{item.name}}</text>
					</view>
				</view>

				<!-- 分类列表 -->
				<view class="type-brands" v-for="item in getAllBrandsByType" :key="item.id">
					<view class="type-title">{{ item.name }}</view>
					<view class="brands-list">
						<view 
							class="list-item" 
							v-for="itemChild in item.childrenList" 
							:key="itemChild.id"
							@click="toDetail(item,itemChild)"
							>
								<image :src="itemChild.coverPic"/>
								<text>{{itemChild.name}}</text>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { ref,reactive,onMounted,computed } from 'vue'
  import { onLoad, onShow } from "@dcloudio/uni-app";
	
	import {useSwitchTab} from '@/composables/switchTab.js'
	import { brandAndType,allType } from '@/api/brand.js'
	const {toIndex} = useSwitchTab()
	const goBack = () => {
		uni.navigateBack({ delta: 1 })
	}
	const dataInfo = reactive({
		typeList: [],  //左侧分类列表
		hotList: [] ,//热门品牌
		allBrandsList: [],  //全部品牌
		allBrandsListShow:{}, //将所有品牌按字母顺序排列
		allBrandsAlphabet: [],  //全部品牌字母表
		allData:[], //获取的所有数据
	})
	const pageType = ref('1') //1全部品牌  2分类
	const ischangeType = ref(0)
	const ischangeName = ref('')
	const changeTypeId = ref(0) //左侧选择的typeid
	//选的首字母
	const keyValue = ref('')
	//滚动条的位置
	const scrollTop = ref(0)

	onLoad(({ type }) => {
		console.log('品牌分类type',type)
		pageType.value = type
	})

	onMounted(() => {
		if(pageType.value === '1'){
			getAllBrand()
		}else{
			getAllType()
		}
	})

	

	//获取全部品牌
	const getAllBrand = async () => {
		let res = await brandAndType()
		console.log('品牌res',res)
		dataInfo.allData = res
		dataInfo.typeList = res.map((item,index) => {
			return {id:index , name: item.typeName}
		})
		dataInfo.hotList = res.filter(item => item.typeName === "推荐")[0].hotList
		dataInfo.allBrandsList = res.filter(item => item.typeName === "品牌")[0].brandList
		dataInfo.allBrandsAlphabet = Array.from(new Set(dataInfo.hotList.map(item => item.firstLetter))) 
		dataInfo.allBrandsAlphabet.sort()

		showListOfAlphabet()

		console.log('所有品牌',dataInfo.allBrandsList)
		console.log('字母表',dataInfo.allBrandsAlphabet)
	}

	//获取分类
	const getAllType = async () => {
		let res = await allType()
		console.log('分类res',res)
		dataInfo.allData = res.types
		dataInfo.typeList = res.types.map((item,index) => {
			return {id:item.id , name: item.name}
		})
		ischangeName.value = dataInfo.allData[0].name
		// dataInfo.hotList = res.filter(item => item.typeName === "推荐")[0].hotList
		// dataInfo.allBrandsList = res.filter(item => item.typeName === "品牌")[0].brandList
		// dataInfo.allBrandsAlphabet = Array.from(new Set(dataInfo.hotList.map(item => item.firstLetter))) 
		// dataInfo.allBrandsAlphabet.sort()

		// showListOfAlphabet()

		// console.log('所有品牌',dataInfo.allBrandsList)
		// console.log('字母表',dataInfo.allBrandsAlphabet)
	}

	//将所有品牌按字母顺序排列
	const showListOfAlphabet = () => {
		let newObj = {}
		dataInfo.allBrandsAlphabet.forEach(item => {
			newObj[item] = dataInfo.allBrandsList.filter(i => i.firstLetter === item)
		});
		dataInfo.allBrandsListShow = newObj
	}

	// 获取某分类下面的所有品牌  （全部品牌页面）
	const getBrandsByType = computed(() => {
		return dataInfo.allData.filter(item => item.typeName === ischangeName.value)[0]?.brandList
	})
	// 获取某分类下面的热销品牌
	const getHotBrandsByType = computed(() => {
		if(pageType.value === '1'){
			return dataInfo.allData.filter(item => item.typeName === ischangeName.value)[0]?.hotList
		}else{
			return dataInfo.allData.filter(item => item.name === ischangeName.value)[0]?.hotBrand
		}
	
	})
	// 获取某分类下面的所有子分类及子分类对于的品牌 （分类页面）
	const getAllBrandsByType = computed(() => {
		return dataInfo.allData.filter(item => item.name === ischangeName.value)[0]?.childList
	})


	//左侧切换类型
	const changeType = (i,names,id) => {
		ischangeType.value = i
		ischangeName.value = names
		scrollTop.value = scrollTop.value ? 0 : 1 
		changeTypeId.value = id
	}

	//热门品牌
	const hotBrands = reactive([
		{
			id:1,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'路易斯登'
		},
		{
			id:2,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'古驰'
		},
		{
			id:3,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'迪奥'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
	])

	//全部品牌
	const allBrands = reactive({
		A:[
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'A BATODLL'
			},
			{
				id:2,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'A kgATOD fikn'
			},
		],
		B:[
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},
			{
				id:1,
				coverPic:"https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494",
				name:'B-Low The Belt'
			},

		]
	})

	//奢包、腕表等品牌
	const brandsOfType = reactive([
		{
			id:1,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'路易斯登'
		},
		{
			id:2,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'古驰'
		},
		{
			id:3,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'迪奥'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
		{
			id:4,
			img:'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1720428239494',
			name:'香奈儿'
		},
	])
	
	//切换字母
	const changeKeyFunc = (key) => {
		console.log('key',key);
		keyValue.value = key
		// uni.vibrateShort()
	}

	const letterMove = (e) => {
		console.log('滑动',e);
		console.log('滑动',e.changedTouches[0].clientY);
	}

	const goSearch = () => {
		uni.navigateTo({ url: '/pages/recommendSearch/index' });
	}

	//跳转详情
	const toDetail = (item,itemChild) => {
		if(pageType.value == 2){
			//跳转到分类详情
			uni.navigateTo({ 
				url: '/pages/typeDetails/index?id=' + changeTypeId.value + '&names=' + ischangeName.value
			});
		}else {
			//跳转品牌详情
		}
	}

</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		/* overflow: hidden; */
		/* display: flex; */
		/* flex-direction: column; */

		.go-back{
			width: 750rpx;
			height: 88rpx;
			padding:0 30rpx;
			border-bottom: 2rpx solid #F1F1F1;
			box-sizing: border-box;
			@include flex(row,space-between,center);
			image{
				width: 40rpx;
				height: 40rpx;
			}
			view{
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.search-img{
			width: 40rpx;
			height: 40rpx;
		}

		.con-bottom{
			height: calc(100% - var(--status-bar-height) - 90rpx);
			padding-top: calc(var(--status-bar-height) + 90rpx);
			display: flex;
			flex-direction: row;
			.brands-left{
				width: 168rpx;
				height: 100%;
				background: #F4F3F7;
				.type-item{
					width: 168rpx;
					height: 96rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					position: relative;
					padding: 0 10rpx;
					box-sizing: border-box;
					@include flex(row,center,center);

					>text{
						@extend %text-overflow;
					}
					

					.line{
						width: 24rpx;
						height: 8rpx;
						background: #16DFF2;
						border-radius: 4rpx;
						position: absolute;
						bottom: 18rpx;
						left: 72rpx;
					}
				}
				.isCheck{
						font-weight: 500;
						font-size: 28rpx;
						color: #111111;
						background-color: white;
					}
			}
			.brands-list{
				width: 100%;
				@include flex(row,flex-start,center,wrap);
				/* background-color: pink; */
				margin-bottom: 10rpx;
				.list-item{
					width: 120rpx;
					height: 180rpx;
					margin-bottom: 36rpx;
					@include flex(column,space-between,center);
					image{
						width: 120rpx;
						height: 120rpx;
						border-radius: 60rpx;
					}
					text{
						font-weight: 400;
						font-size: 24rpx;
						color: #111111;
					}
				}
				.list-item:nth-of-type(3n+2){
					margin-left: 81rpx;
					margin-right: 81rpx;
				}
			}
			.brands-right{
				width: 582rpx;
				height: calc(100vh - (var(--status-bar-height) + 88rpx));
				padding: 0 30rpx 0 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				position: relative;
				.hot-topic-title{
					width: 122rpx;
					height: 34rpx;
					margin-bottom: 36rpx;
					margin-top: 34rpx;
					>image{
						width: 122rpx;
						height: 34rpx;
					}

				}
				
				.all-brands{
					width: 522rpx;
					/* height: 100%;
					position: relative; */
					/* background-color: #16DFF2; */
					@include flex(row,space-between,flex-start);
					.list-left{
						width: 522rpx;
						height: auto;
						/* background-color: #16DFF2; */
						.title{
							font-weight: 400;
							font-size: 28rpx;
							color: #111111;
							margin-bottom: 24rpx;
						}

						.all-list {
							.all-list-item{

							}
              .all-list-type {
								font-size: 32rpx;
								font-weight: 400;
								color: #222222;
								line-height: 38rpx;
								padding: 8rpx 0;
              }
              .all-list-col {
								width: 420rpx;
								height: 96rpx;
								@include flex(row,flex-start,center);
								.all-list-col-img {
										width: 48rpx;
										height: 48rpx;
										margin-right: 16rpx;
										image {
											width: 100%;
											height: 100%;
											border-radius: 24rpx;
										}
								}
								.all-list-col-name {
										font-size: 28rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: 400;
										color: #222222;
										line-height: 33rpx;
								}
              }
          	}
					}

					.list-right{
						width: 24rpx;
            position: sticky;
						top:40rpx;
						/* right: 20rpx; */
						/* display: flex;
						flex-direction: column;
						align-items: center; */
						/* background-color: rgb(121, 212, 79); */
						padding-top: 100rpx;
						.letter-item{
							font-family: AppleSystemUIFont;
							font-size: 26rpx;
							color: #222222;
							@include flex(column,flex-start,center);
						}
						.check-item{
							font-size: 30rpx;
							font-weight: 500;
						}
					}
				}
				.type-brands{
					width: 522rpx;
					
				}

				.type-title{
					font-weight: 600;
					font-size: 28rpx;
					color: #111111;
					margin-bottom: 36rpx;
				}
			}
		}
	}
</style>
